<template>
	<div>
		<input type="file" accept="image/*" id="uploadImg" name="uploadImg">
		<input type="button" value="上传" id="btnSubmit">
		<div class="photo" id="preview"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				imageList: [],
				count: 3, //设置能上传的最大数量
			}
		},
		created() {

		},
		methods: {

		}
	}

	$(function() {
		var uploadImg = document.getElementById('uploadImg'),
			preview = document.getElementById('preview'),
			btnSubmit = document.getElementById('btnSubmit'),
			imgurl = '';

		// uploadImg.addEventListener('change', handleFileImg, false);

		// btnSubmit.addEventListener('click', submitImg, false); //上传按钮	
	})
	// 拍照选择完成的回调
	function handleFileImg() {
		// 为了获取图片的本地路径
		window.URL = window.URL || window.webkitURL;
		// 获取移动端类型Android   iPhone  ipad
		var sUserAgent = navigator.userAgent.toLowerCase();
		// 获取当前图片信息（单张图片上传）
		var selected_file = uploadImg.files[0];
		console.log(selected_file);
		if (sUserAgent.match(/android/i) == "android") {
			var img = new Image();
			// 生成一个本地图片展示路径
			img.src = window.URL.createObjectURL(selected_file);
			preview.innerHTML = '';
			// 添加到页面展示
			preview.appendChild(img);
			/*
				new FileReader()：方法简述
				一、调用FileReader对象的方法
	
				方法名 参数 描述
				abort none 中断读取
				readAsBinaryString file 将文件读取为二进制码
				readAsDataURL file 将文件读取为 DataURL
				readAsText file, [encoding] 将文件读取为文本
				readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
				readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
				readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
	
				二、处理事件
				事件 描述
				onabort 中断时触发
				onerror 出错时触发
				onload 文件读取成功完成时触发
				onloadend 读取完成触发，无论成功或失败
				onloadstart 读取开始时触发
				onprogress 读取中
				*/
			var reader = new FileReader(); //简单来说就是异步读取电脑中的文件
			reader.onload = function(e) {
				imgurl = e.target.result;
			};
			reader.readAsDataURL(selected_file);
		} else {
			//判断文件类型是否为图片
			if (!selected_file.type.match(/image.*/)) return false;
			var img = document.createElement('img');
			// base64赋值 
			img.file = selected_file;
			preview.innerHTML = '';
			preview.appendChild(img);

			img.onload = function() {
				imgurl = img.src;
			};

			var reader = new FileReader();
			reader.onload = function(e) {
				img.src = e.target.result;
			};
			reader.readAsDataURL(selected_file);
		}
	}

	// 上传base64编码到后台
	function submitImg() {
		// 根据公司需要自行修改
		var start = imgurl.indexOf(',') + 1;
		dataurl = imgurl.substr(start);
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open('post', 'xxxxx', true);
		xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
		xmlhttp.setRequestHeader('X_Requested-With', 'XMLHttpRequest');
		xmlhttp.send('dataurl=' + encodeURIComponent(dataurl));
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				console.log(xmlhttp.responseText)
			}
		}
	}
</script>
